<template>
  <div style="display: flex;padding: 15px">
    <el-form :model="form" label-width="auto" style="width: 300px">
      <el-form-item label="">
        <el-input placeholder="输入具体信息" v-model="form.queryString"  />
      </el-form-item>
    </el-form>
    <div style="padding-left: 3px">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="用于查询相关数据"
          placement="bottom"
      >
        <el-button type="primary" icon="Search" @click="ser()" round>查询</el-button>
      </el-tooltip>

      <el-tooltip
          class="box-item"
          effect="dark"
          content="可以在该表中添加数据"
          placement="bottom"
      >
        <el-button type="success" icon="Plus" round>添加</el-button>
      </el-tooltip>
    </div>
  </div>

    <el-table :data="tableData" v-loading="loading" style="width: 100%;border-radius: 10px">
      <el-table-column fixed prop="id" label="uuid" width="120" />
      <el-table-column prop="time" label="日期" width="150" />
      <el-table-column label="头像" width="120">
        <template #default="scope">
          <el-image
              style="width: 60px;height: 60px;"
              :src="scope.row.avator"
              :preview-src-list="[scope.row.avator]"
              hide-on-click-modal="true"
              preview-teleported="true">
            <template #error>
              <div class="image-slot">
                <el-icon><user /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="password" label="密码" width="120" />
      <el-table-column prop="phone" label="电话号码" width="120" />
      <el-table-column prop="email" label="邮箱" width="120" />
      <el-table-column prop="qq" label="qq" width="120" />
      <el-table-column prop="sellen" label="塞伦" width="120" />
      <el-table-column prop="option" label="选择" width="120" />
      <el-table-column prop="type" label="类型" width="120" />
      <el-table-column prop="pay" label="支付" width="120" />
      <el-table-column prop="mid" label="中路" width="120" />
      <el-table-column prop="rank" label="排" width="120" />
      <el-table-column fixed="right" label="操作数据表" min-width="230">
        <template #default="scope">
          <el-tooltip
              class="box-item"
              effect="dark"
              content="删除该表中该行数据"
              placement="left-start"
          >
            <el-button link type="danger" icon="Delete"  @click="deleteLine(scope.row.id)" />
          </el-tooltip>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="点击可以编辑该行的数据"
              placement="right-start"
          >
            <el-button link type="primary" @click="editOpen" icon="EditPen" />
          </el-tooltip>

        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block" style="padding-top: 30px;">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

  <el-drawer
      v-model="drawer"
      title="I am the title"
      :direction="direction"
      :before-close="handleClose"
  >
    <span>权限控制</span>
<!--    :default-expanded-keys="[2, 3]"-->
<!--    :default-checked-keys="[5]"-->
    <div class="tree-container">
      <el-tree
          style="height: 100%; width: 100%;"
          :data="permissionsData"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          show-checkbox
          node-key="id"
          :props="defaultProps"
      />
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {getUser} from "@/api/api"
const form = ref({
  queryString:''
})
import type {ComponentSize, DrawerProps} from 'element-plus'
import {success,error} from "@/message/messageApi"
import {tree} from "@/api/api"
import {ElMessageBox} from "element-plus";
interface userData{
  avatar: string;
  email: string;
  id: string;
  mid: string;
  name: string;
  option: string;
  password: string;
  pay: string;
  phone: string;
  qq: string;
  rank: string;
  sellen: string;
  time: string;
  type: string;
  username: string;
}
const tableData = ref<userData[]>([])
const drawer = ref(false)
const defaultProps = {
  children: 'children',
  label: (data: { menu: any; name: any; discrible: any; }) => data.menu || data.name || data.discrible,
  disabled: (data: { disabled: string; }) => data.disabled === 'false'
};
const loading = ref(true)
const permissionsData = ref([
 //  {
 //    id:1,
 //    menu:"权限管理",
 //    children:[
 //      {
 //        id:4,
 //        menu:"用户管理",
 //        children:[
 //          {
 //            id:5,
 //            permissions:'删除'
 //          },
 //          {
 //            id:6,
 //            permissions:'添加'
 //          }
 //        ]
 //      },
 //      {
 //        id:4,
 //        menu:"菜单管理",
 //        children:[
 //          {
 //            id:5,
 //            permissions:'删除'
 //          },
 //          {
 //            id:6,
 //            permissions:'添加'
 //          }
 //        ]
 //      }
 //    ]
 //  },
 //  {
 //    id:2,
 //    menu:"药品管理",
 //    children:[
 //      {
 //        id:7,
 //        menu:"西药管理",
 //        children:[
 //          {
 //            id:8,
 //            permissions:'删除'
 //          },
 //          {
 //            id:8,
 //            permissions:'添加'
 //          }
 //        ]
 //      },
 //      {
 //        id:3,
 //        menu:"中药管理",
 //        children:[
 //          {
 //            id:12,
 //            permissions:'删除'
 //          },
 //          {
 //            id:11,
 //            permissions:'添加'
 //          }
 //        ]
 //      }
 //    ]
 //  },
 // {
 //   id:2,
 //       menu:"药品管理",
 //     children:[
 //   {
 //     id:7,
 //     menu:"西药管理",
 //     children:[
 //       {
 //         id:8,
 //         permissions:'删除'
 //       },
 //       {
 //         id:8,
 //         permissions:'添加'
 //       }
 //     ]
 //   },
 //   {
 //     id:3,
 //     menu:"中药管理",
 //     children:[
 //       {
 //         id:12,
 //         permissions:'删除'
 //       },
 //       {
 //         id:11,
 //         permissions:'添加'
 //       }
 //     ]
 //   }
 // ]
 // },
 //  {
 //    id:2,
 //    menu:"药品管理",
 //    children:[
 //      {
 //        id:7,
 //        menu:"西药管理",
 //        children:[
 //          {
 //            id:8,
 //            permissions:'删除'
 //          },
 //          {
 //            id:8,
 //            permissions:'添加'
 //          }
 //        ]
 //      },
 //      {
 //        id:3,
 //        menu:"中药管理",
 //        children:[
 //          {
 //            id:12,
 //            permissions:'删除'
 //          },
 //          {
 //            id:11,
 //            permissions:'添加'
 //          }
 //        ]
 //      }
 //    ]
 //  }
])

const handleClick = () => {
  console.log('click')
}
onMounted(() =>{
  ser()
})
function ser() {
  if (loading.value === true){
    loading.value = false
  } else {
    loading.value = true
  }
  getUser().then((val:any)=>{
    console.log(val)
    tableData.value = val.data
    // console.log(tableData.value)

  })
}
function deleteLine(val:string){
  const index = tableData.value.findIndex(row => row.id === val);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    success('删除成功');
  } else {
    error('未找到对应的数据');
  }
}

const currentPage = ref(4)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭吗')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

function editOpen() {
  tree().then((vel:{data:any}) =>{
    // console.log(vel)
    permissionsData.value = vel.data;
    drawer.value = true;
  })
}
</script>

<style scoped>
.tree-container {
  height: 300px;
  width: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  display: flex;
  align-items: stretch;
}
</style>
